<template>
  <q-page class="flex flex-center">
    <SideBar v-model:model-value="leftDrawerOpen" width="260">
      <template #body>
        <div class="absolute-top button-container">
          <q-btn
            flat
            rounded
            @click="
              () => {
                leftDrawerOpen = !leftDrawerOpen;
              }
            "
          >
            <q-icon name="img:/assets/drawer_ctrl.svg" />
          </q-btn>

          <q-btn flat rounded to="/chatgpt">
            <q-icon name="img:/assets/shrink.svg" />
          </q-btn>
        </div>
        <q-scroll-area class="drawer-box">
          <q-list padding>
            <q-item-label header>云端工具</q-item-label>
            <q-item
              clickable
              v-ripple
              v-for="(item, index) in menuArr.cloudTools"
              :key="item.id"
              @click="toPage('cloudTools', item)"
            >
              <q-item-section avatar top>
                <q-avatar
                  :icon="item.icon"
                  :color="item.iconBg"
                  :text-color="item.iconColor"
                />
              </q-item-section>

              <q-item-section>
                <q-item-label :lines="index">{{ item.name }}</q-item-label>
                <q-item-label caption>{{ item.desc }}</q-item-label>
              </q-item-section>

              <q-item-section side>
                <q-icon
                  v-if="menuArr.activeId === item.id"
                  name="fa-regular fa-hand-point-left"
                  :color="menuArr.activeId === item.id ? 'green' : undefined"
                />
              </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>
        <div class="absolute-bottom bottom-container"></div>
      </template>
    </SideBar>

    <TopBar>
      <template #left>
        <div
          class="absolute-top"
          style="margin-top: 10px"
          v-if="!leftDrawerOpen"
        >
          <q-btn
            flat
            rounded
            @click="
              () => {
                leftDrawerOpen = !leftDrawerOpen;
              }
            "
          >
            <q-icon name="img:/assets/drawer_ctrl.svg" />
          </q-btn>
        </div>

        <q-btn
          class="page-title"
          dense
          flat
          no-caps
          :style="{ marginLeft: `${leftDrawerOpen ? '0px' : '50px'}` }"
        >
          <q-icon
            color="blue"
            :name="applicationIcon"
            size="30px"
            style="margin-right: 10px"
          />
          <span>{{ applicationName }}</span>
        </q-btn>
      </template>

      <template #right>
        <q-btn flat dense v-if="userInfo !== null">
          <q-avatar color="yellow-8" text-color="white" size="30px">
            <span v-if="!userInfo.avatar_url">{{ userInfo.username[0] }}</span>
            <q-img v-else :src="userInfo.avatar_url" />
          </q-avatar>
        </q-btn>
      </template>
    </TopBar>

    <div style="width: 100%; height: 100%" class="flex flex-center">
      <router-view style="width: 100%; height: 100%" />
    </div>
    <BeiAn />
  </q-page>
</template>

<script setup>
import TopBar from "components/TopBar.vue";
import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { session } from "boot/axios.js";
import { useRouter } from "vue-router";
import SideBar from "components/SideBar.vue";
import BeiAn from "components/BeiAn.vue";
import { uuidv4 } from "src/utility/StringUtil";
import URLSearch from "src/utility/URLSearch";

const router = useRouter();
const applicationName = ref("应用程序");
const applicationIcon = ref("fa-brands fa-app-store-ios");
const $q = useQuasar();
const userInfo = ref(null);
const leftDrawerOpen = ref(true);
const menuArr = reactive({
  cloudTools: [
    {
      id: uuidv4(),
      icon: "folder",
      iconBg: "",
      iconColor: "yellow-8",
      name: "存储",
      desc: "文件云端存储，图床",
      path: "/application/cloud",
    },
    {
      id: uuidv4(),
      icon: "fa-solid fa-blog",
      iconBg: "lightcyan",
      iconColor: "teal",
      name: "博客",
      desc: "Markdown编辑器",
      path: "/application/blog",
    },
    // {
    //   id: uuidv4(),
    //   icon: "fa-brands fa-windows",
    //   iconBg: "blue-1",
    //   iconColor: "primary",
    //   name: "远程连接",
    //   desc: "Windows RDP，Linux",
    //   path: "/application/connection",
    // },
  ],
  activeId: null,
});

const toPage = (key, page) => {
  menuArr.activeId = page.id;
  applicationName.value = page.name;
  applicationIcon.value = page.icon;
  router.push(page.path).then(() => {
    URLSearch.addOrUpdateQueryParam("Region", key);
    URLSearch.addOrUpdateQueryParam("Page", page.name);
  });
};

const onloadPageInfo = () => {
  const params = URLSearch.getAllQueryParams();
  if (
    params &&
    params.Region &&
    params.Page &&
    Object.keys(menuArr).includes(params.Region)
  ) {
    menuArr[params.Region].forEach((item) => {
      if (item.name === params.Page) {
        menuArr.activeId = item.id;
        applicationName.value = item.name;
        applicationIcon.value = item.icon;
      }
    });
  } else {
    menuArr.cloudTools.forEach((item) => {
      if (item.path === router.currentRoute.value.fullPath.split("?")[0]) {
        menuArr.activeId = item.id;
        applicationName.value = item.name;
        applicationIcon.value = item.icon;
        URLSearch.addOrUpdateQueryParam("Region", "cloudTools");
        URLSearch.addOrUpdateQueryParam("Page", item.name);
      }
    });
  }
};

onMounted(async () => {
  $q.loading.show();

  userInfo.value = await session.get("userInfo");
  if (userInfo.value !== null) {
    onloadPageInfo();
  }
  $q.loading.hide();
});
</script>

<style>
.page-title {
  color: #5d5d5d;
  font-weight: 600;
  font-size: 1.125rem;
  margin-top: 5px;
  line-height: 1.75rem;
}

.button-container {
  display: flex;
  justify-content: space-between; /* 在容器的两端排列子元素 */
  align-items: center; /* 垂直居中对齐 */
  height: 56px; /* 设定与父容器相同的高度 */
  margin-left: 8px;
  margin-right: 8px;
}

.bottom-container {
  margin-left: 8px;
  margin-right: 8px;
  height: 40px;
}

.drawer-box {
  height: calc(100% - 106px);
  margin-top: 56px;
  padding-left: 7px;
  padding-right: 7px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0d0d0d;
}
</style>
